<template>
  <view class="classlist">
    <!-- 顶部加载更多 -->
    <view class="loadingLayout" v-if="!classListDeatil.length && !noData">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    <view class="content">
      <navigator
        :url="`/pages/preview/index?id=${item._id}`"
        class="item"
        v-for="item in classListDeatil"
        :key="item._id"
      >
        <image
          :src="item.smallPicurl"
          :key="item._id"
          mode="aspectFill"
        ></image>
      </navigator>
    </view>
    <!-- 底部加载更多 -->
    <view class="loadingLayout" v-if="classListDeatil.length || noData">
      <uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
    </view>
    <!-- 底部安全区域 -->
    <view
      class="safe-area-inset-bottom"
      :style="{ paddingBottom: getBottomHeight() + 10 + 'px' }"
    ></view>
  </view>
</template>

<script setup>
import { getClassifyDetailAPI, apiGetHistoryList } from "@/apis/apis.js";
import {
  onLoad,
  onUnload,
  onReachBottom,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";

// 获取我们底部安全区域高度
import { getBottomHeight } from "../../utils/system";
import { ref } from "vue";
import { gotoHome } from "@/utils/date.js";
const classListDeatil = ref([]);
let pageName;

// 控制下拉到底禁止发网络请求
const noData = ref(false);

const queryParams = {
  pageNum: 1,
  pageSize: 12,
};
onLoad((e) => {
  // console.log(e);
  let { id, name, type } = e;
  // if (!id) gotoHome();
  if (type) queryParams.type = type;
  if (id) queryParams.classid = id;
  pageName = name;
  // 动态设置标题
  uni.setNavigationBarTitle({
    title: name,
  });
  // 执行我们的异步接口函数
  getClassifyDetailFn();
});

const getClassifyDetailFn = async () => {
  let res;
  if (queryParams.classid) res = await getClassifyDetailAPI(queryParams);
  if (queryParams.type) res = await apiGetHistoryList(queryParams);
  // 设置布尔值
  classListDeatil.value = [...classListDeatil.value, ...res.data];

  // 如果没有数据了就改为ture不要再发请求了
  if (queryParams.pageSize > res.data.length) noData.value = true;

  //  把分类列表数据存本地一份，防止多次请求服务器
  uni.setStorageSync("storgClassList", classListDeatil.value);
};

// 进行触底下拉刷新
onReachBottom(() => {
  // console.log("我触底了");

  if (noData.value) return;
  queryParams.pageNum++;
  // 重新获取网络请求，新数据
  getClassifyDetailFn();
});

//分享给好友
onShareAppMessage((e) => {
  return {
    title: "咸虾米壁纸-" + pageName,
    path:
      "/pages/classList/classList?id=" +
      queryParams.classid +
      "&name=" +
      pageName,
  };
});

//分享朋友圈
onShareTimeline(() => {
  return {
    title: "咸虾米壁纸-" + pageName,
    query: "id=" + queryParams.classid + "&name=" + pageName,
  };
});

// 离开页面时清除缓存
onUnload(() => {
  uni.removeStorageSync("storgClassList");
});
</script>

<style lang="scss" scoped>
.classlist {
  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item {
      height: 440rpx;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
